<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>级联下拉列表示例</title>
    <link rel="stylesheet" href="../stylesheets/common.css" />
    <link rel="stylesheet" href="../stylesheets/table.css" />
    <link rel="stylesheet" href="../ext/zw/lui-v2.1/css/extension.css" />

</head>

<body>
    <div class="place">
        <span class="label-span">位置：</span>
        <ul id="place-list" class="place-ul">
            <li>
                首页
            </li>
        </ul>
    </div>
    <div class="body-warp">


        <div class="panel" style="">
            <div class="panel-body">
                <form class="field-container">
                    <span class="headline">包裹框<i class="iconfont infotips showtips" data-tipsid='#ccc' title="这里可以进行解释说明">&#xe644;</i></span>
                    <div id="ccc" class="showtips-alert alert alert-success mb-10"><span><i class="iconfont">&#xe624;</i>这里可以进行解释说明</span><span class="tips-close"><i class="iconfont">&#xe628;</i></span></div>
                    <table class="form-table">

                        <tr>
                            <td>
                                <label class="form-label" for="search1">#0201<b class="red">*</b></label>
                            </td>
                            <td>
                                <div class="clearfix clear">
                                    <div style="float:left;margin-right:10px;">
                                        <div id="panelview0201" class="ext-select-panelview">
                                        </div>
                                        <div id="droplist0201" class="ext-droplist hide">
                                        </div>
                                    </div>
                                    <div style="float:left;margin-right:10px;">
                                        <div id="panelview0202" class="ext-select-panelview">
                                        </div>
                                        <div id="droplist0202" class="ext-droplist hide">
                                        </div>
                                    </div>
                                    <div style="float:left;margin-right:10px;">
                                        <div id="panelview0203" class="ext-select-panelview">
                                        </div>
                                        <div id="droplist0203" class="ext-droplist hide">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td><span class="form-tip alert alert-info">禁用</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div id="dddd"></div>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/common.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/luicontroller-advance.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/panelview.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/droplist.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/extension.js"></script>
    <script>
        $(function () {

            //1个配置：指定级联列表
            var setting = {
                selector: "#dddd", //target
                type: 1, //0 默认一直出现，1，选择一个后出现下一级
                length: 3, //指定级联列表长度，3层层级，如果指明了length将忽略其他
                simpleData: true,
                //加载方式，1.加载数据到每个列表里，选择时筛选（为每个节点增加数据,会影响筛选速度）
                //2.加载分段数据到每个列表，选择时筛选，（需要为每个列表传入分组数据，操作反锁，但查询效率高）
                //3.加载数据到第一个列表里，选择时根据子节点数据逐一增加至下一级列表（数据项是一个多重数组）
                //children有可能是一个异步地址

                //带children格式的数据，可以采用筛选和加载方式
                //如果children上绑定了链接地址时，则采用加载方式，如果当前是采用分组方式则将忽略该功能
                //type: 1,
                //可以通过绑定ID的方式绑定选择器位置，如果有指明length将截断选择器数组的长度
                placeholder: ["请选择省份", "请选择城市", "请选择县市"],
                trigger: [],
                viewer: [], //要rerun回去  可以对现有的exter进街上封装成级联关系

                //支持两种数据格式
                //一级数组，带pIdd的对象(转换为children方式)
                //一级数组带层级结构的children（优先使用）
                data: [
                        {
                            id: 0,
                            name: "浙江省",
                            pId: null,
						},
                        {
                            id: 1,
                            name: "江苏省",
                            pId: null,


				}, {
                            id: 11,
                            name: "杭州市",
                            pId: 0,
            }, {
                            id: 12,
                            name: "温州市",
                            pId: 0,
            }, {
                            id: 13,
                            name: "台州市",
                            pId: 0,
            }, {
                            id: 21,
                            name: "苏州市",
                            pId: 1,

            }, {
                            id: 22,
                            name: "南通市",
                            pId: 1,
            }, {
                            id: 23,
                            name: "盐城市",
                            pId: 1,
            },
                        {
                            id: 121,
                            name: "鹿城区",
                            pId: 12,
            }, {
                            id: 122,
                            name: "瑞安市",
                            pId: 12,
            }, {
                            id: 111,
                            name: "江滨区",
                            pId: 11,
            }, {
                            id: 112,
                            name: "上城区",
                            pId: 11,
            }
                ] //data也可能是一个初始请求地址
            }



            log(EXT.CascadingDroplist(setting));

            /* 初始化控件 */
            initWidget();

            /*侦听*/
            addListeners();

        });

        /*初始化控件*/
        function initWidget() {}

        function addListeners(argument) {
            $('form').submit(function () {

            });
        }
    </script>
</body>

</html>